<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
        <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
		<link href="../css/estilos.css" rel="stylesheet">
        <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Della+Respira' rel='stylesheet' type='text/css'>
	<title>EasyCook</title>

        
                <style>
          body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
          }
        </style>
        
            <link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>

    <div class="container">
<!--div id="container"-->
	
	<div class="Banner">
		<img class="logo" src="../images/logo.png" alt="" height="100" width="100">
		<h3 class="logoTitle">EasyCook</h3>
	</div>	
	<br>
	<div id="mainBody">
            
            	            <?php
$response = file_get_contents('http://api.backcountry.com/public/search?q=new+balnce+shoes&pagesize=5&sort=-price&recurse=1');
                          //  echo $response;            ?>
            
            <script>
                function fillProduct(excercise){
                    if(excercise === 'run'){
                        
                        //We must bring all the list of running product
                       var obtainedJSON = <?php echo json_encode($response); ?>;
                        // var obj = jQuery.parseJSON('{"name":"John"}');
                       // alert( obj.name === "John" );
                       // alert(obtainedJSON);
                       var obj = jQuery.parseJSON(obtainedJSON);
                       var prod = obj.products;
                       
                       var div = document.getElementById("response");
                       div.innerHTML = prod[0].id;
                      
                       var displayName = prod[0].displayName;
                      var imageURL = prod[0].imageLarge.url;
                       $('#response').append(displayName);
                       $('#response').append(imageURL);
                    }
                    
                }
            
            
            </script>
          
            <button class="btn btn-large btn-primary"style="text-align: center;" onclick="fillProduct('run');"/>View Products</button>
        <br>
        
          <div id="response">
                
                
            </div>

	</div>

	<p class="footer">Freelancers, Hackaton 2013, San Jose Costa Rica</p>
</div>

</body>
</html>